<!--
'A Leaf' design by Greg Smith - http://gregdev.net
Please leave the 'designed by' link intact and visible; that's all I ask!
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
	<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />	
	<title>A Leaf</title>
</head>
<body>
	<div id="wrap">
		<div id="title">
			<h1><a href="#">A Leaf</a></h1>
		</div>
		<div id="content">
			<h1>Welcome</h1>
			<p>This design makes use of a somewhat underused item in the technical community: a leaf.
			The original image is from <a href="http://www.freeimages.co.uk">FreeImages</a>; I just used my very limited
			PhotoShop skills to hack it up a bit.</p>
			<h2>An H2 Subheading</h2>
			<p>This design is valid XHTML 1.1. Unfortunately, due to the opacity of the menu buttons, the CSS will
			not validate. "Opacity" is a CSS3 valid object, however Internet Explorer 6, as usual, doesn't
			recognise the opacity element. A proprietary IE opacity	object has been used to create the same opacity effect
			in IE, but this will cause CSS validation to fail. If you are a validation Nazi you can easily remove
			the IE opacity effect; the design will work without it.
			But people using Internet Explorer should be given more reason to upgrade :)</p>
			<p class="quote">This design is released under the Creative Commons license. Do what you will with it;
			the only thing I request in return is that you leave the link to my Web site intact.</p>
			<p>The leaf background image is only 788 pixels high, but your content can go for as long as you want.
			Once the image ends, a nice green colour will fade in. You can also add more items to the menu; just
			make sure you change the minimum height of the #content div.</p>
		</div>
		<div id="side">
			<ul>
				<li><a class="item" href="#">A Section</a></li>
					<li><a class="itemsub" href="#">A Page</a></li>
					<li><a class="itemsub" href="#">Another Page</a></li>
					<li><a class="itemsub" href="#">A Page Again</a></li>
				<li><a class="item" href="#">A Section Again</a></li>
					<li><a class="itemsub" href="#">Look, a Page</a></li>
					<li><a class="itemsub" href="#">This is a Page</a></li>
					<li><a class="itemsub" href="#">Also a Page</a></li>
				<li><a class="item" href="#">A Third Section</a></li>
					<li><a class="itemsub" href="#">Pages Galore</a></li>
					<li><a class="itemsub" href="#">Page of Blah</a></li>
			</ul>
		</div>
		<div class="clear"></div>
		<div id="footer"></div>
	</div>
	<div id="bottom">
		<p>&copy; 2009 Your Name Here</p>
		<p><a href="http://gregdev.net">Web design</a> by <a href="http://gregdev.net">Greg Smith</a></p>
	</div>
</body>
</html>